<template>
  <van-row>
    <div class="top"></div>
    <van-notice-bar mode="closeable">
      欢迎使用CrestShare在线答题系统，答题测试将在11月30日下午19点开始。
    </van-notice-bar>
    <div>
      <van-card
        tag="正在进行"
        desc="2018.11.30-19:00"
        title="前端组测试"
        :thumb="imageURL[0]"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('前端')">查看详情</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="未开始"
        desc="2018.11.30-19:00"
        title="后端组测试"
        :thumb="imageURL[1]"
      >
        <div slot="footer">
          <van-button size="small" type="primary" disabled @click="need('后端')">查看详情</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="正在进行"
        desc="2018.11.30-19:00"
        title="视觉组测试"
        :thumb="imageURL[2]"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('视觉')">查看详情</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="正在进行"
        desc="2018.11.30-19:00"
        title="产品组测试"
        :thumb="imageURL[3]"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('产品')">查看详情</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="正在进行"
        desc="2018.11.30-19:00"
        title="运营组测试"
        :thumb="imageURL[4]"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('运营')">查看详情</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div>
      <van-card
        tag="正在进行"
        desc="2018.11.30-19:00"
        title="基础组测试"
        :thumb="imageURL[5]"
      >
        <div slot="footer">
          <van-button size="small" type="primary" @click="need('基础')">查看详情</van-button>
        </div>
      </van-card>
      <van-cell-group>
        <van-cell/>
      </van-cell-group>
    </div>
    <div class="bottom"></div>
  </van-row>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      imageURL: [
        'https://img2.woyaogexing.com/2018/11/02/38d17098a63a4acdaf85a264054b5dbd!400x400.jpeg',
        'https://img2.woyaogexing.com/2018/11/02/d0fa5afdb8344a4eaf9faeb093674836!400x400.jpeg',
        'https://img2.woyaogexing.com/2018/11/02/4cf0926629a341e98fc33dd361882da9!400x400.jpeg',
        'https://img2.woyaogexing.com/2018/11/02/e4bfcbbce27c43b783caea7290128141!400x400.jpeg',
        'https://img2.woyaogexing.com/2018/11/02/e84c1d0866ad4ea983cd6a59bb60b756!400x400.jpeg',
        'https://img2.woyaogexing.com/2018/11/02/957ad68d27e646c4888d6c3ab9808bf3!400x400.jpeg'
      ]
    }
  },
  methods: {
    need (direction) {
      Dialog.confirm({
        title: `${direction}测试`,
        message: '测试将于2018年11月30日晚上19:00开始，请按时参加。答题时间为1小时，点击确定开始正式答题，答题时请保证独立完成。结束答卷后，3到5天可以在系统的历史选项中查询自己的答卷情况。'
      }).then(() => {
        // on confirm ajax
        if (confirm) {
          this.$router.push('/questions')
        }
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>

<style scoped>
</style>
